<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据导出</title>
    </head>
    <style>
        [v-cloak] {
            display: none;
        }

        .table {
            width: 50%;
            margin-top: 6px;
            border-collapse: collapse;
            border: 1px solid #cccccc
        }

        .table th {
            border-bottom: 1px solid #cccccc;
            border-right: 1px solid #cccccc
        }
    </style>
    <body>
        <div id="app" v-cloak>
            用户类型：
            <select v-model="userType">
                <option value="0" selected>管理员</option>
                <option value="1" selected>普通用户</option>
            </select>
            账号状态：
            <select v-model="status">
                <option value="0">正常</option>
                <option value="1">停用</option>
            </select>
            &nbsp;&nbsp;&nbsp;<button @click="conditionSelect">查询</button>
            &nbsp;&nbsp;&nbsp;<button @click="userDataExport(0)">Excel导出</button>
            &nbsp;&nbsp;&nbsp;<button @click="userDataExport(1)">CSV导出</button>
            &nbsp;&nbsp;&nbsp;<button @click="userDataExport(2)">JSON导出</button>
            &nbsp;&nbsp;&nbsp;<button @click="userDataExport(3)">PDF导出</button>
            &nbsp;&nbsp;&nbsp;<button @click="userDataExport(4)">WORD导出</button>
            <table class="table">
                <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>用户类型</th>
                        <th>账号状态</th>
                    </tr>
                </thead>
                <tr v-for="(item,index) in userList" :key="index" style="border-bottom: 1px solid #cccccc">
                    <th>{{item.id}}</th>
                    <th>{{item.username}}</th>
                    <th>{{item.nickname}}</th>
                    <th>{{item.userType == 0 ? '管理员' : '普通用户'}}</th>
                    <th>{{item.status == 0 ? '正常' : '停用'}}</th>
                </tr>
            </table>
        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.js"></script>
    <script src="/static/js/base64.js"></script>
    <script src="/static/js/qs.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                userList: {},
                userType: 0,
                status: 0
            },
            mounted: function () {
                this.initUserData();
            },
            methods: {
                initUserData: function () {
                    axios.post('/getLoginUser').then(response => {
                        this.userList = response.data.data;
                    });
                },
                conditionSelect() {
                    axios.post('/getLoginUser', Qs.stringify({
                        userType: this.userType,
                        status: this.status
                    })).then(response => {
                        this.userList = response.data.data;
                    })
                },
                userDataExport(format) {
                    let condition = {
                        userType: this.userType,
                        status: this.status
                    };
                    switch (format) {
                        case 0:
                            window.open("/export/userDataByExcel?condition=" + Base64.encode(JSON.stringify(condition)));
                            break;
                        case 1:
                            window.open("/export/userDataByCSV?condition=" + Base64.encode(JSON.stringify(condition)));
                            break;
                        case 2:
                            window.open("/export/userDataByJSON?condition=" + Base64.encode(JSON.stringify(condition)));
                            break;
                        case 3:
                            window.open("/export/userDataByPDF?condition=" + Base64.encode(JSON.stringify(condition)));
                            break;
                        case 4:
                            window.open("/export/userDataByWORD?condition=" + Base64.encode(JSON.stringify(condition)));
                            break;
                        default:
                            window.open("/export/userDataByExcel?condition=" + Base64.encode(JSON.stringify(condition)));
                    }
                },
            }
        })
    </script>
</html>